<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/header.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/layui.js}"></script>

</head>
<body>
<div class="layui-layout layui-layout-admin" id="admin">
    <div class="layui-header layui-bg-bg">
        <div class="layui-logo layui-hide-xs">
            <a th:href="@{/}">
                <img class="img" th:src="@{/images/plane.svg}">
            </a>
        </div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item  layui-show-md-inline-block">
                <a href="javascript:;">
                    <span class="name">你好,</span><span id="name" class="name">{{name}}</span>
                    <img id="userImg" class="layui-nav-img userImage"
                         :src="prefix+imageSrc">
                </a>
                <dl class="layui-nav-child">
                    <dd v-on:click="click($event)"><a id="userinfo" data-src="/userInfo">个人主页</a></dd>
                    <dd v-on:click="show"><a>修改密码</a></dd>
                    <dd><a th:href="@{/exit}">退出登录</a></dd>
                </dl>
            </li>
        </ul>

    </div>

    <div class="layui-side layui-bg-black">

        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree layui-bg-black" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
                <a>查询功能</a>
                <dl class="layui-nav-child">
                    <dd v-on:click="click($event)"><a data-src="/searchId">编号查询</a></dd>
                    <dd v-on:click="click($event)"><a data-src="/searchName">姓名查询</a></dd>
                    <dd v-on:click="click($event)"><a data-src="/searchUsername">用户名查询</a></dd>
                    <dd v-on:click="click($event)"><a data-src="/searchKey">关键字查询</a></dd>
                </dl>
            </li>
            <li v-if="administrator" class="layui-nav-item layui-nav-itemed">
                <a>管理功能</a>
                <dl class="layui-nav-child">
                    <dd v-on:click="click($event)"><a data-src="/manager/acc">管理账号密码</a></dd>
                    <dd v-on:click="click($event)"><a data-src="/manager/userI">查看所有的用户</a></dd>
                </dl>
            </li>
        </ul>
    </div>


    <div class="layui-body">
<!--        <div class="main_right">-->
            <iframe frameborder="0" scrolling="yes" v-bind:src="src">

            </iframe>
<!--        </div>-->
    </div>

    <!--    <div class="layui-footer">-->
    <!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--        底部固定区域-->
    <!--    </div>-->
</div>


</body>

<script th:inline="javascript">



    var v = new Vue({
        el: '#admin',
        data: {
            src: '',
            imageSrc:[[${session.user.picture}]],
            name: [[${session.user.name}]],
            prefix:'http://localhost:8080/pictures/',
            administrator:[[${session.user.administrator}]]
        },
        methods: {
            click: function (event) {
                var dataSrc = event.currentTarget.firstElementChild.getAttribute('data-src');
                this.src = dataSrc;
            },
            show: function () {
                layer.open({
                    id:'first',
                    type: 2,
                    area: ['500px'],
                    content: 'http://localhost:8080/user/up',
                    closeBtn:2,
                    shadeClose:true,
                    title: "修改密码",
                    resize: false,
                    anim:0,
                });
            }
        },
        mounted: function () {
            var dataSrc = document.getElementById("userinfo").getAttribute('data-src');
            this.src = dataSrc;
        }
    })


</script>
</html>